layui.use(['table'], function() {
    var table = layui.table;
    var layer = layui.layer

    renderMyTable()

    // 渲染表格
    function renderMyTable() {
        // 创建渲染实例
        table.render({
            // 绑定的表格的dom对象
            elem: '#cate',
            // 表格的数据接口地址,模拟接口数据，将来改成自己的数据接口
            url: '/cates/getCateApi',
            // 绑定的工具栏
            toolbar: '#toolbarDemo',
            // 工具栏的选项
            defaultToolbar: ['exports', 'print'],
            // 表格的高度：最大高度减去其他容器已占有的高度差
            // height: 'full-200',
            // 单元格的最小宽度
            // cellMinWidth: 100,
            // width: 600,
            // 是否开启分页
            page: true,
            // 每页显示的条数,
            limit: 3,
            // 每页条数的选择项
            limits: [3, 6, 9, 12, 15],
            // 列选项，需要数据（数组对象的属性）保持一致
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    width: 120,
                    title: 'ID',
                    sort: true
                }, {
                    field: 'cate_name',
                    width: 180,
                    title: '分类名称',
                    edit: 'text'
                }, {
                    fixed: 'right',
                    title: '操作',
                    width: 150,
                    minWidth: 150,
                    // 工具列
                    toolbar: '#op'
                }]
            ],
            // 表格加载失败的的回调函数
            error: function(res, msg) {
                console.log(res, msg)
            }
        });

    }


    //触发单元格工具事件（删除和修改）
    table.on('tool(test)', function(obj) { // 双击 toolDouble
        // 保留了要操作的数据
        var id = obj.data.id;
        if (obj.event === 'del') {
            layer.confirm('您确定要删除吗?', function(index) {
                axios({
                    method: 'delete',
                    url: `/cates/${id}`
                }).then(res => {
                    if (res.data.status !== 200) {
                        return layer.msg('删除失败', { icon: 5 })
                    }
                    layer.msg('删除成功', { icon: 6 }, function() {
                        // 页面删除
                        // obj.del();
                        // layer.close(index);
                        // 重新渲染表格
                        renderMyTable()
                    })
                })
            });
        } else if (obj.event === 'edit') {
            layer.open({
                title: '修改分类',
                type: 2,
                area: ['500px', '300px'],
                content: `/cates/${id}/edit`,
                // 弹出层销毁时的回调
                end: function() {
                    // 重新渲染表格
                    renderMyTable()
                }
            });
        }
    });

    // 单元格编辑事件
    table.on('edit(test)', function(obj) {
        var field = obj.field, //得到字段
            value = obj.value, //得到修改后的值
            data = obj.data; //得到所在行所有键值
        // 发送请求去数据库修改分类名称
        axios({
            method: 'PUT',
            url: ` / cates / $ { data.id }
                            /updateCateName`,
            data
        }).then(res => {
            if (res.data.status === 200) {
                layer.msg('修改成功', {
                    icon: 6,
                    time: 2000
                }, function() {
                    // 页面的修改
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                })
            } else {
                layer.msg('修改失败', {
                    icon: 5,
                    time: 3000
                }, function() {
                    // 重新刷新页面
                    location.reload()
                })
            }
        })
    });

    //全选和全不选
    table.on('checkbox(test)', function(obj) {
        console.log(obj)
    });


});